<template>
  <div class="codeSupport">
    <!-- 侧边拦 -->
    <titleVue :content="'编程支架'"></titleVue>
    <div class="content">
      <asideNav :list="list" @changeActive="handleChangeActive"></asideNav>
      <supportContent :contentList="list[activeIndex].contentList"></supportContent>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import list from '@/stores/codeSupport.js'
import titleVue from '../common/titleVue.vue';
defineOptions({
  name: 'codeSupportIndex'
})

const activeIndex = ref(0)
const handleChangeActive = (index) => {
  // 改变传输给内容栏目的列表内容
  activeIndex.value = index
  console.log(index)
  console.log(list[index].contentList)
}
</script>

<style lang="less" scoped>
@theme-color: #00a98f;
.codeSupport {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90vh;
  // background-color: pink;
  padding-top: 5px;
  margin-left: 8px;
}

.content {
  display: flex;
  gap: 5px;
}
</style>
